<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="search.status" @tab-change="tabChange">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<el-tab-pane label="等待开票" name="1"></el-tab-pane>
				<el-tab-pane label="已开票" name="2"></el-tab-pane>
				<el-tab-pane label="驳回" name="3"></el-tab-pane>
			</el-tabs>
		</el-header>
		<el-header>
			<div class="left-panel">
				<div class="right-panel-search">
					<el-date-picker style="width: 150px;" v-model="search.start_time" value-format="X" type="date"
						placeholder="开始时间" />
					<el-date-picker style="width: 150px;" v-model="search.end_time" value-format="X" type="date"
						placeholder="截止时间" />
					<el-select style="width: 120px;" v-model="search.invoice_type" clearable placeholder="发票类型">
						<el-option label="个人" value="1" />
						<el-option label="企业" value="2" />
						<el-option label="政府/事业单位" value="3" />
					</el-select>
					<el-select style="width: 120px;" v-model="search.range_type" clearable placeholder="范围类型">
						<el-option label="按单开票" value="1" />
						<el-option label="按月开票" value="2" />
					</el-select>
					<el-input style="width: 200px;" v-model="search.name" placeholder="抬头全称" clearable></el-input>
					<el-input style="width: 200px;" v-model="search.invoic_no" placeholder="开票编号" clearable></el-input>
					<el-input style="width: 100px;" v-model="search.member_id" placeholder="会员ID" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
			<div class="right-panel">
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable2 ref="table" :apiObj="list.apiObj" row-key="id" stripe>
				<el-table-column label="ID" prop="id" width="60"></el-table-column>
				<el-table-column label="开票编号" prop="invoic_no" width="180"></el-table-column>
				<el-table-column label="会员信息" prop="member_id" width="120">
					<template #default="scope">
						<p>会员ID：{{scope.row.member_id}}</p>
					</template>
				</el-table-column>
				<el-table-column label="发票信息" prop="invoice_type_text" width="200">
					<template #default="scope">
						<p>发票类型：{{scope.row.invoice_type_text}}</p>
						<p>抬头全称：{{scope.row.name}}</p>
						<p v-if="scope.row.idnumber">身份证号：{{scope.row.idnumber}}</p>
						<p v-if="scope.row.address">地址：{{scope.row.address}}</p>
						<p v-if="scope.row.email">邮箱：{{scope.row.email}}</p>
					</template>
				</el-table-column>
				<el-table-column label="开票金额" prop="amount" width="100">
					<template #default="scope">
						<p style="color: #f56c6c; font-weight: bold;">{{scope.row.amount}}元</p>
					</template>
				</el-table-column>
				<el-table-column label="范围类型" prop="range_type_text" width="100"></el-table-column>
				<!-- <el-table-column label="关联订单" prop="memberOrder" width="200">
					<template #default="scope">
						<div v-if="scope.row.memberOrder && scope.row.memberOrder.length > 0">
							<p v-for="order in scope.row.memberOrder" :key="order.id">
								订单号：{{order.ordernum}}
							</p>
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column> -->
				<el-table-column label="状态" prop="status_type_text" width="100">
					<template #default="scope">
						<el-tag :type="getStatusType(scope.row.status)">
							{{scope.row.status_type_text}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="发票URL" prop="url" width="200">
					<template #default="scope">
						<span v-if="scope.row.url" style="color: #409EFF; word-break: break-all;">{{scope.row.url}}</span>
						<span v-else style="color: #999;">-</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="create_time" width="150"></el-table-column>
				<el-table-column label="更新时间" prop="update_time" width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="250">
					<template #default="scope">
						<el-button size="small" type="info" @click="table_detail(scope.row)">查看详情</el-button>
						<el-button size="small" v-if="scope.row.status == 1" type="primary" 
							@click="table_audit(scope.row)">开票审核</el-button>
						<el-button size="small" v-if="scope.row.url" type="success" 
							@click="downloadInvoice(scope.row)">下载发票</el-button>
					</template>
				</el-table-column>
			</scTable2>
		</el-main>
	</el-container>
	
	<!-- 开票详情弹窗 -->
	<invoiceDetail v-if="dialog.detail" ref="detailDialog" @closed="dialog.detail=false" @audit="handleAuditFromDetail"></invoiceDetail>
	
	<!-- 开票审核弹窗 -->
	<invoiceAudit v-if="dialog.audit" ref="auditDialog" @success="handleSaveSuccess" @closed="dialog.audit=false"></invoiceAudit>
</template>

<script>
	import invoiceAudit from './components/invoiceAudit.vue'
	import invoiceDetail from './components/invoiceDetail.vue'
	
	export default {
		name: 'invoiceList',
		components: {
			invoiceAudit,
			invoiceDetail
		},
		data() {
			return {
				dialog: {
					detail: false,
					audit: false
				},
				search: {
					start_time: '',
					end_time: '',
					status: '',
					invoice_type: '',
					range_type: '',
					name: '',
					invoic_no: '',
					member_id: ''
				},
				list: {
					apiObj: this.$API.invoice.invoice.list
				}
			}
		},
		computed: {
		},
		mounted() {
		},
		methods: {
			// 获取状态标签类型
			getStatusType(status) {
				const statusMap = {
					1: 'warning',  // 等待开票
					2: 'success',  // 已开票
					3: 'danger'    // 驳回
				}
				return statusMap[status] || 'info'
			},
			
			// 查看详情
			table_detail(row) {
				this.dialog.detail = true
				this.$nextTick(() => {
					this.$refs.detailDialog.open().setData(row)
				})
			},
			
			// 开票审核
			table_audit(row) {
				this.dialog.audit = true
				this.$nextTick(() => {
					this.$refs.auditDialog.open().setData(row)
				})
			},
			
			// 从详情页面跳转到审核
			handleAuditFromDetail(row) {
				this.table_audit(row)
			},
			
			// 标签切换
			tabChange(name) {
				this.search.status = name
				this.$refs.table.reload({
					...this.search
				})
			},
			
			// 搜索
			upsearch() {
				let search = JSON.parse(JSON.stringify(this.search))
				this.$refs.table.upData({
					...search
				})
			},
			
			// 下载发票
			downloadInvoice(row) {
				if (!row.url) {
					this.$message.warning('发票链接不存在')
					return
				}
				
				try {
					// 创建一个临时的a标签来触发下载
					const link = document.createElement('a')
					link.href = row.url
					link.download = `发票_${row.invoic_no || row.id}.pdf` // 使用开票编号作为文件名
					link.target = '_blank'
					document.body.appendChild(link)
					link.click()
					document.body.removeChild(link)
					
					this.$message.success('开始下载发票')
				} catch (error) {
					console.error('下载发票失败:', error)
					this.$message.error('下载失败，请检查链接是否有效')
				}
			},
			
			// 操作成功回调
			handleSaveSuccess(data, mode) {
				console.log(data, mode)
				// 刷新表格
				this.$refs.table.refresh()
			}
		}
	}
</script>

<style>
</style>
